<template>
  <div class="box">
    <div class="titleBox">
      <div class="titleBox-one">
        <div>今日应收(课程)：0</div>
        <div>今日应收(商城)：0</div>
        <div>今日应收：0</div>
        <div>今日应收：0</div>
      </div>
      <div class="titleBox-two">
        <div>今日新增会员：0</div>
        <div>累计会员：0</div>
        <div>昨日新增会员：0</div>
        <div></div>
      </div>
      <div class="titleBox-three">
        <div>今日上课：0</div>
        <div>昨日上课：0</div>
      </div>
    </div>
    <div class="infoBox">
      <div class="infoBox-one">
        <div class="infoBox-one-title">
          <router-link to="/BusinessOverview/Class"  class="infoBox-one-title-first" active-class="active">今日团课</router-link>
          <router-link to="/BusinessOverview/Private" class="infoBox-one-title-middle" active-class="active">今日私教</router-link>
          <div class="infoBox-one-title-last">更多</div>
        </div>
        <div class="infoBox-one-info">
          <router-view></router-view>
        </div>
      </div>
      <div class="infoBox-two">
        <div class="infoBox-two-title">
          <div class="infoBox-two-title-one">最新办卡</div>
          <div>更多</div>
        </div>
        <div class="infoBox-two-title-info">
          <div>教练私教课程</div>
          <div>次卡</div>
        </div>
        <div class="infoBox-two-title-info">
          <div>教练私教课程</div>
          <div>次卡</div>
        </div>
      </div>
    </div>
    <div class="chartBox"></div>
  </div>
  <div class="echart">
    <div>
      <div class="echart-title-one"></div>
      <div class="echart-one"></div>
    </div>
    <div>

    </div>
  </div>
</template>

<script lang="ts">
  export default {
    name:'BusinessOverview'
  }
</script>

<style scoped>
  .box{
    width: 90%;
    background-color: lightgray;
    margin: 50px auto 20px auto;
  }
  .titleBox,.infoBox{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .titleBox-one,.titleBox-two,.titleBox-three{
    width: 32%;
    height: 130px;
    background-color: #ED5565;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    color: white;
    font-weight: 600;
  }
  .titleBox-two{
    background-color: #2096F3;
  }
  .titleBox-three{
    background-color: #0CC3AA;
  }
  .infoBox{
    margin-top: 20px;
  }
  .infoBox-one,.infoBox-two{
    width: 49%;
    height: 280px;
    border: 1px solid rgb(168, 165, 165);
    background-color: white;
  }
  .infoBox-one-title,.infoBox-two-title{
    width: 100%;
    height: 50px;
    background-color: lightgray;
  }
  .infoBox-one-title>div{
    width: 15%;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  .infoBox-one-title>a{
    text-decoration: none;
    color: black;
  }
  .infoBox-one-title-first,.infoBox-one-title-middle{
    width: 15%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    float: left;
  }
  .infoBox-one-title-last{
    float: right;
  }
  .infoBox-two-title{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .infoBox-two-title>div{
    width: 15%;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  .active{
    background-color: white;
    font-weight: 700;
  }
  .infoBox-two-title-one{
    background-color: white;
    font-weight: 700;
  }
  .infoBox-two-title-info{
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  .echart{
    border-top: 1px solid gray;
    width: 90%;
    margin: auto;
  }
</style>